<template>
  <div
    id="myChart10"
    :style="{ height: 7 * $store.state.radomRate + 'rem' }"
  ></div>
</template>
<script>
export default {
  data() {
    return {
      time: new Date().getTime(),
    };
  },
  mounted() {
    this.communityRank();
  },
  methods: {
    communityRank() {
      let params = {
        time: this.time,
      };
      let result = this.$md5.transferValue(params);
      this.axios
        .post(this.stateUrl.dataModel.communityRank, {
          time: this.time,
          sign: this.$md5.val(result),
        })
        .then((res) => {
          this.drawLine(res.data.data);
        })
        .catch(() => {});
    },
    drawLine(list) {
      let myChart = this.$echarts.init(document.getElementById("myChart10"));
      let yData = list.map(item=>{
        return item.communityName
      })
      let data = list.map(item=>{
        return item.count
      })
      var option = {
        backgroundColor: "#0f375f",
        barWidth: 12,
        xAxis: {
          type: "value",
          splitLine: {
            lineStyle: {
              color: "rgba(255,255,255,0.2)",
              type: "dashed",
            },
          },
          axisTick: {
            show: false,
          },
          axisLabel: {
            //  改变x轴字体颜色和大小
            textStyle: {
              color: "rgba(250,250,250)",
              fontSize: 16,
            },
          },
        },
        yAxis: {
          type: "category",
          data: yData,
          splitLine: {
            show: false,
          },
          axisTick: {
            show: false,
          },
          axisLine: {
            //  改变y轴颜色
            lineStyle: {
              color: "#2c4054",
            },
          },
          axisLabel: {
            //  改变y轴字体颜色和大小
            //formatter: '{value} m³ ', //  给y轴添加单位
            textStyle: {
              color: "rgba(250,250,250)",
              fontSize: 16,
            },
          },
        },
        series: [
          {
            type: "bar",
            name: "产出",
            barWidth: 25,
            itemStyle: {
              normal: {
                label: {
                  show: true, //开启显示
                  position: "insideRight", //在上方显示
                  textStyle: {
                    //数值样式
                    color: "#FFFFFF",
                    fontSize: 16,
                    fontWeight: 600,
                  },
                },
                color: new this.$echarts.graphic.LinearGradient(1, 0, 0, 0, [
                  {
                    offset: 0,
                    color: "rgba(24,144,255,1)",
                  },
                  {
                    offset: 1,
                    color: "rgba(24,144,255,0)",
                  },
                ]),
                barBorderRadius: 15,
              },
            },
            data:data,
          },
        ],
      };
      myChart.setOption(option);
      window.addEventListener("resize", () => {
        myChart.resize();
      });
    },
  },
};
</script>
<style lang="less" scoped>
</style>